<!--
 * @Author: your name
 * @Date: 2021-08-06 16:47:25
 * @LastEditTime: 2021-08-06 16:47:25
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \xxtx-group-ui\src\views\Special.vue
-->
<template>
  <div class="special">
    <!-- 头部 -->
    <Header></Header>
    <!-- 头部 -->
    <!-- 体部 -->
    <div class="content">
      <div class="wrapper">
        <h3 class="title">专题</h3>
        <ul>
          <li
            v-for="item in articaleData"
            :key="item.id"
            @click="toArticleHandler(item.id)"
          >
            <div class="cover"><img :src="item.cover" alt="" /></div>
            <div class="article">{{ item.title }}</div>
            <div class="publishTime">{{ item.publishTime | fmtDate }}</div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 体部 -->
    <!-- 底部 -->
    <Footer></Footer>
    <!-- 底部 -->
  </div>
</template>
<script>
import { get } from "../utils/request";
import Header from "./components/Header.vue";
import Footer from "./components/Footer.vue";
export default {
  components: {
    Header,
    Footer,
  },
  data() {
    return {
      articaleData: {},
      params: { page: 1, pageSize: 5,categoryId:6 },
    };
  },
  created() {
    this.category = this.$route.query;
    this.loadArticales();
  },
  methods: {
    toArticleHandler(id) {
      this.$router.push({ path: "/article", query: { id } });
    },
    pageChangeHandler(page) {
      this.param.page = page;
      this.loadArticles();
    },
    loadArticales() {
      let url = "/index/article/pageQuery";
      get(url, this.params).then((res) => {
        this.articaleData = res.data.list;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.content {
  height: 429px;
  .title {
    line-height: 2em;
  }
  ul {
    display: inline-block;
    width: 100%;
    position: absolute;
    li {
      box-sizing: border-box;
      width: 33%;
      height: 200px;
      float: left;
      margin-bottom: 1em;
      .cover,
      .article:hover {
        cursor: pointer;
        line-height: 2em;
        img {
          width: 300px;
          height: 120px;
        }
      }
    }
  }
}
</style>